<template>
  <div class="main">
    <div class="e1">
      <div class="e1-1">
        <div class="e1-1-1">
          <div class="e1-1-1a container">
            <img
              src="../../../assets/img/p4-2.png"
              class="img-responsive"
              width="234"
              height="56"
            /><br />
            <span
              >起飞页是当今最领先的响应式自助建站平台，流线式网页布局设计方案，可视化图文内容编辑模式，它让网站制作和维护成为一件轻松惬意的事。无论是普通互联网用户还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。</span
            >
            <br /><a>现在注册</a>
          </div>
        </div>
      </div>
      <div class="e1-2">
        <div class="e1-2-1">
          <div class="e1-2-1a container">
            <span>手语学习字典</span>
            <br />
            <p>这里收藏了众多手语单词。</p>
            <p>加油，您也可以轻松学习手语！</p>
          </div>
        </div>
      </div>
    </div>
    <div class="e2 clearfix">
      <div class="e2-1 col-lg-2 col-md-2">
        <ul class="eul1">
          <li @click="add($event)" id="all" class="active">
            <span><b class="glyphicon glyphicon-play"></b> 所有词汇</span>
          </li>
          <li @click="add($event)" id="finger">
            <span><b class="glyphicon glyphicon-play"></b> 手指语</span>
          </li>
          <li @click="showBottom()">
            <span
              ><b class="glyphicon glyphicon-play"></b> 单/双手手语词汇</span
            >
            <ul class="eul2">
              <li @click="add($event)" id="single">
                <a><b class="glyphicon glyphicon-play"></b> 单手手语词汇</a>
              </li>
              <li @click="add($event)" id="double">
                <a><b class="glyphicon glyphicon-play"></b> 双手手语词汇</a>
              </li>
            </ul>
          </li>
          <li @click="add($event)" id="other">
            <span><b class="glyphicon glyphicon-play"></b> 其他</span>
          </li>
        </ul>
      </div>
      <div
        id="app"
        class="e2-2 col-lg-10 col-md-10 col-sm-12 col-xs-12 clearfix"
      >
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 clearfix">
          <div class="imgList" v-for="(img, i) in showimgList" :key="i">
            <img :src="img.imgUrl" />
            <p>{{ img.meaning }}</p>
          </div>
        </div>
      </div>
    </div>
    <div style="margin-left: 35%">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        @size-change="handleSizeChange"
        :page-size="queryInfo.pagesize"
        :page-sizes="[4, 8, 16]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import allImgList from "../../../assets/data/allImgList.json";
import fingerImgList from "../../../assets/data/fingerImgList.json";
import singleImgList from "../../../assets/data/singleImgList.json";
import doubleImgList from "../../../assets/data/doubleImgList.json";
import otherImgList from "../../../assets/data/otherImgList.json";
export default {
  name: "Learn",
  data() {
    return {
      // 获取图片列表的参数对象
      queryInfo: {
        // 当前的页数
        pagenum: 1,
        // 当前每次显示多少条数据
        pagesize: 8,
      },
      // 存放图片的和数量
      total: 0,
      showimgList: [],
      condition: "all",
    };
  },
  methods: {
    showOther() {
      document.getElementById("wd2-clearfix").style.display = "block";
    },
    showAbout() {
      document.getElementById("gy2-left-clearfix").style.display = "block";
    },
    hidOther() {
      document.getElementById("wd2-clearfix").style.display = "none";
    },
    hidAbout() {
      document.getElementById("gy2-left-clearfix").style.display = "none";
    },
    showBottom() {
      document.getElementsByClassName("eul2")[0].style.display = "block";
    },
    getImgList() {
      var imgData = null;
      if (this.condition == "all") {
        imgData = allImgList;
      } else if (this.condition == "finger") {
        imgData = fingerImgList;
      } else if (this.condition == "single") {
        imgData = singleImgList;
      } else if (this.condition == "double") {
        imgData = doubleImgList;
      } else if (this.condition == "other") {
        imgData = otherImgList;
      }
      this.total = imgData.length;
      var curimgData = imgData.slice(
        (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize,
        this.queryInfo.pagenum * this.queryInfo.pagesize
      );
      curimgData.forEach((item) => {
        item.imgUrl = require("../../../assets/img/" + item.meaning + ".png");
      });
      this.showimgList = curimgData;
    },
    add(e) {
      var id = e.currentTarget.getAttributeNode("id").value;
      var lis = document.getElementsByTagName("li");
      for (var i = 0, length = lis.length; i < length; i++) {
        if (lis[i].classList.length != 0) {
          lis[i].classList.remove("active");
        }
      }
      e.currentTarget.classList.add("active");
      if (id != "double" && id != "single") {
        document.getElementsByClassName("eul2")[0].style.display = "none";
      }
      this.condition = id;
      this.getImgList();
    },
    // 监听 pagesize 改变事件 每页显示的个数
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getImgList();
    },
    // 监听 页码值 改变的事件 当前页面值
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getImgList();
    },
  },
  mounted: function () {
    this.getImgList();
    this.$emit("getChildName", "learn");
  },
};
</script>

<style lang="css" scoped>
@import url("../../../assets/css/example.css");

.imgList {
  float: left;
  margin-left: 50px;
  margin-right: 50px;
}
.imgList > img {
  width: 200px;
  height: 200px;
}
.imgList > p {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  font-style: oblique;
  color: green;
}
</style>
